.title {
  color: rebeccapurple;
}
.con {
  position:relative;
  display:inline-block;
  height:200px;
  width:200px;
}

.percent-circle {
  position:absolute;
  height:100%;
  background:#f00;
  overflow: hidden;
}

.percent-circle-right {
  right:0;
  width:100px;
  border-radius: 0 100px 100px 0/0 100px 100px 0;
}

.percent-circle-right .right-content{
  position: absolute;
  content: '';
  width: 100%; 
  height: 100%;
  transform-origin:left center;
  transform: rotate(0deg);
  border-radius: 0 100px 100px 0/0 100px 100px 0;
  background:#bbb;
  animation: rtd 2s  both infinite ;
}

.percent-circle-left {
  width:100px;
  border-radius: 100px 0 0 100px/100px 0 0 100px;
}

.percent-circle-left .left-content {
  position: absolute;
  content: '';
  width: 100%; 
  height: 100%;
  transform-origin:right center;
  transform: rotate(0deg);
  border-radius: 100px 0 0 100px/100px 0 0 100px;
  background:#bbb;
  animation:  rt 2s both infinite;
}

.text-circle {
  position: absolute;
  display:flex;
  align-items: center;
  justify-content: center;
  height:80%;
  width:80%;
  left:10%;
  top:10%;
  border-radius:100%;
  background:#000;
  color:#fff;
}


@keyframes rt{
  0% {transform: rotate(0deg) }
  50% { transform: rotate(180deg) }
  100% { transform: rotate(180deg) }
}
@keyframes rtd{

  0% {transform: rotate(0deg) }
  50% {transform: rotate(0deg) }
  100% { transform: rotate(180deg) }
}